<template>
  <div id="map" style="height: 300px;width:100%;">

  </div>
</template>


<script>
  export default {
    props: ["lat", "lng", "zoom", "showOnly"],
    data: function () {
      return {
        selectValue: "",
        loading: false,
        options: [],
      };
    },
    mounted: function () {


      console.info("init map");
      if (this.lat) {
        this.initMap(this.lat, this.lng);
      } else {
        this.initMap();
      }
    },
    watch: {
      lat: function () {
        console.info("lat:" + this.lat);
        this.initMap(this.lat, this.lng);
      },
    },
    methods: {
      loadDatas() {},
      changeData(value) {
        console.info(value);
        this.$emit("poi-change", value);
      },
      initMap(lat, lng) {
        var tempZoom = this.zoom;
        if (tempZoom == null || tempZoom == undefined) {
          tempZoom = 20;
        } else {
          tempZoom = parseInt(tempZoom);
        }
        console.log("初始化地图");
        var center = new qq.maps.LatLng(34.3350, 108.94777);
        if (lat != null && lng != null) {
          center = new qq.maps.LatLng(lat, lng);
        }
        var map = new qq.maps.Map(document.getElementById("map"), {
          center: center,
          zoom: tempZoom,
        });
        //获取城市列表接口设置中心点
        var citylocation = new qq.maps.CityService({
          complete: function (result) {
            map.setCenter(result.detail.latLng);
          },
        });
        //调用searchLocalCity();方法    根据用户IP查询城市信息。
        //citylocation.searchLocalCity();
        var self = this;

        qq.maps.event.addListener(map, "click", function (event) {
          var lat = event.latLng.getLat();
          var lng = event.latLng.getLng();
          var showOnly = self.showOnly;
          if (showOnly == undefined || showOnly == null) {
            showOnly = false;
          }
          if (showOnly) {
            return;
          }

          console.info(self);
          if (self) {
            var tempEvent = {};
            tempEvent.lat = lat;
            tempEvent.lng = lng;
            self.$emit("poi-change", tempEvent);
          }

          if (marker != null) {
            marker.setMap(null);
          }
          center = new qq.maps.LatLng(
            event.latLng.getLat(),
            event.latLng.getLng()
          );
          marker = new qq.maps.Marker({
            position: center,
            map: map,
          });
        });
        //创建标记
        var marker = new qq.maps.Marker({
          position: center,
          map: map,
        });
      },
      updatePoi(event) {
        console.info("updatePoi:" + event);
      },
    },
  };
</script>

<style>
</style>